<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="query.queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
            v-model="query.queryParams.search"
            placeholder="标题名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="keywords" label="分类">
          <el-select
            v-model="query.queryParams.category"
            placeholder="请选择分类"
          >
            <el-option
              v-for="(item, i) in state.formInline.options"
              :key="i"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords" label="时间">
          <el-date-picker
            v-model="query.queryParams.time"
            type="date"
            placeholder="请选择时间"
            :disabled-date="disabledDate"
            :shortcuts="shortcuts"
            :size="size"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSearch" :icon="Search"
            >搜索</el-button
          >
          <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card" shadow="never">
      <template #header>
        <el-form-item style="float: left">
          <el-button
            v-hasPerm="['examine']"
            type="info"
            :disabled="!state.ids.length"
            :icon="Select"
            @click="examine"
            >审核</el-button
          >
          <el-button
            v-hasPerm="['delete']"
            type="danger"
            :disabled="!state.ids.length"
            :icon="Delete"
            @click="delArticle"
            >删除</el-button
          >
        </el-form-item>
      </template>
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="articleList"
        @selection-change="handleSelectionChange"
        highlight-current-row
        border
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="文章标题" prop="tatle" min-width="120" />
        <el-table-column label="分类名称" prop="className" width="100" />
        <el-table-column label="文章图片" prop="sex">
          <template #default="scope">
            <el-image :src="scope.row.wztp[0]" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.sh === '1'" type="success">正常</el-tag>
            <el-tag v-else type="info">审核中</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布时间" width="180">
          <template #default="scope">
            {{ dayjs(scope.row.time).format('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left">
          <template #default="scope">
            <el-button
              v-if="scope.row.sh === '0'"
              type="primary"
              link
              @click="examine(scope.row.uid)"
            >
              审核
            </el-button>
            <el-button @click="delArticle(scope.row.uid)" type="danger" link>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <Pagination
        v-if="state.articleList.length"
        :pageable="state.pageable"
        @page-change="pageChange"
        @size-change="sizeChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { articleListApi, examineApi, delArticleApi } from '@/api/article';
import Pagination from '@/components/Pagination/index.vue';
import { ElMessage, ElForm, ElMessageBox } from 'element-plus';
import { onMounted, reactive, toRefs, ref } from 'vue';
import { Search, Select, Refresh, Delete } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
const size = ref<'default' | 'large' | 'small'>('default');
const queryFormRef = ref(ElForm);

const shortcuts = [
  {
    text: '今年',
    value: new Date()
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    }
  }
];
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
const query = reactive({
  queryParams: {
    search: '',
    time: '',
    category: ''
  }
});
const state = reactive({
  ids: [],
  loading: false,
  articleList: [],
  formInline: {
    options: [
      '开发者',
      '设计',
      'iOS',
      'android',
      '后端',
      'php',
      '面试',
      'c+ +',
      '测试开发',
      'css',
      '区块链',
      '数据库',
      'go',
      '产品',
      'linux',
      '人工智能',
      'JavaScript',
      '框架',
      '前端',
      'python',
      'Java',
      '算法',
      '科技动态',
      'js',
      '数码产品',
      'html',
      '软件测试'
    ]
  },
  pageable: {
    pageNumber: 1,
    pageSize: 5,
    total: 100
  }
});
onMounted(() => {
  getarticleList();
});
const resetQuery = () => {
  query.queryParams = {
    search: '',
    time: '',
    category: ''
  };
  getarticleList();
};

const delArticle = async (uid: any) => {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await delArticleApi({ uid: state.ids.length ? state.ids : [uid] });
      ElMessage.success('删除成功');
      state.pageable.pageNumber = state.articleList.length > 1 ? state.pageable.pageNumber : state.pageable.pageNumber - 1
      getarticleList();
    })
    .catch(() => ElMessage.info('已取消删除'));
};
const examine = async (uid: any) => {
  await examineApi({ uid: state.ids.length ? state.ids : [uid] });
  ElMessage.success('操作成功');
  getarticleList();
};

const getSearch = () => {
  state.pageable.pageNumber = 1;
  getarticleList();
};

const getarticleList = async () => {
  state.loading = true;
  const { data } = await articleListApi({
    page: state.pageable.pageNumber,
    size: state.pageable.pageSize,
    tatle: query.queryParams.search,
    className: query.queryParams.category,
    time: query.queryParams.time
  });
  state.articleList = data.data;
  state.pageable.total = data.pageable.total;
  state.loading = false;
};

const handleSelectionChange = async (selection: any) => {
  state.ids = selection.map((item: any) => item.uid);
};

// * 页码改变
const pageChange = (page: number) => {
  state.pageable.pageNumber = page;
  getarticleList();
};

// * 每页条数改变
const sizeChange = (size: number) => {
  state.pageable.pageNumber = 1;
  state.pageable.pageSize = size;
  getarticleList();
};
const { loading, articleList } = toRefs(state);
</script>

<style scoped lang="scss">
.is-has {
  text-align: center;
  color: #ccc;
}

.article-box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.page-view {
  margin-bottom: 10px;
}
</style>
